<template>
  <view class="charging-page">
    <!-- 状态栏占位 -->
    <view class="status-bar"></view>
    
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="nav-left" @click="goToHome">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <view class="nav-center">
        <view class="nav-station-info">
          <view class="station-name">
            <text>{{ stationName }}</text>
          </view>
          <!--
          <view class="gun-number">
            <text>枪编号: 13#-A</text>
          </view>

          -->
        </view>
      </view>
      <view class="nav-right">
        <view class="plate-container">
          <text class="plate-number">沪A·AG6712</text>
        </view>
      </view>
    </view>

    <!-- 充电状态区域 -->
    <view class="charging-status-section">
      <!-- 上方信息框 -->
      <view class="status-info-boxes">
        <view class="info-box">
          <text class="info-text" v-if="chargeState === 1">启动中，请稍后</text>
          <text class="info-text" v-else-if="chargeState === 2">已经充{{ formattedChargingTime }}</text>
          <text class="info-text" v-else-if="chargeState === 3">结束中，请稍后</text>
          <text class="info-text" v-else-if="chargeState === 5">停止中，请稍后</text>
          <text class="info-text" v-else>启动中，请稍后</text>
        </view>
      </view>

      <view class="status-info-boxes">
        <view class="info-box">
          <text class="info-text">已充{{ chargedAmount }}度</text>
        </view>
      </view>

      <!-- 中央充电进度指示器 -->
       <!--
      <view class="charging-progress-circle">
        <image class="bg-image" src="@/static/images/bg.png" mode="aspectFill"></image>
        <view class="battery-circle">
          <view class="battery-circle-inner">
            <text class="battery-percentage" v-if="chargeState === 1 || chargeState === 5">--</text>
            <text class="battery-percentage" v-else>{{ batteryLevel }}%</text>
          </view>
        </view>
        <image class="che-image" src="@/static/images/che.png" mode="aspectFit"></image>
      </view>
      -->
      <view class="charging-progress-circle-1">
        <image class="bg-image" src="@/pagesOne/static/images/bg.png" mode="aspectFill"></image>
        <view class="battery-circle-1">
          <view class="battery-circle-inner">
            <text class="battery-percentage" v-if="chargeState === 1 || chargeState === 5">--</text>
            <text class="battery-percentage" v-else>{{ batteryLevel }}%</text>
          </view>
        </view>
        <view class="limit-charge-view">
          <text class="limit-charge-text">限充95%</text>
        </view>
        <image class="che-image-1" src="@/pagesOne/static/images/car@2x.png" mode="aspectFit"></image>
        <image class="Battery-1" :src="batteryImageSrc" mode="aspectFit"></image> 
      </view>
    </view>

    <!-- 橙色背景卡片 -->
    <view class="orange-header-card" v-if="showOrangeCard">
      <view class="orange-header-content">
        <view class="left-section">
          <view class="checkmark-icon">
            <image src="/static/images/Group 203.png" class="checkmark-image" />
          </view>
          <view class="station-label">
            <text>利行优选站</text>
          </view>
        </view>
        <view class="slogan-text">
          <text>跳枪赔付｜充坏必赔</text>
          <text class="chevron-icon">></text>
        </view>
      </view>
    </view>

    <!-- 充电详情卡片 -->
    <view class="charging-details-card" :class="{ 'no-top-radius': showOrangeCard }">
      <view class="metrics-row">
        <!--
        <view class="metric-item">
          <text class="metric-value">{{ realTimeCost }}元</text>
          <view class="metric-label">
            <text>实时费用</text>
            <text class="info-icon">ℹ️</text>
          </view>
        </view>
        <view class="divider-line-vertical"></view>
        -->
        <view class="metric-item">
          <text class="metric-value">{{ power }}kW</text>
          <text class="metric-label">功率</text>
        </view>
        <view class="divider-line-vertical"></view>
        <view class="metric-item">
          <text class="metric-value">{{ voltage }}V</text>
          <text class="metric-label">电压</text>
        </view>
        <view class="divider-line-vertical"></view>
        <view class="metric-item">
          <text class="metric-value">{{ current }}A</text>
          <text class="metric-label">电流</text>
        </view>
      </view>
      <!--
      <view class="prepaid-info">
        <text>本单已预充值: {{ prepaidAmount }}元</text>
      </view>
      -->
    </view>

    <!-- VIP会员卡片 -->
    <!--
    <view class="station-item" style="background: linear-gradient(180deg, #fef9f3 0%, #ffffff 100%);border: 2rpx solid #fff;">
      <view class="flex-container" style="justify-content: space-between;">
        <view class="station-info">
          <view class="flex-container">
            <view class="station-rating">
              <view class="station-rating-icon">
                <text class="station-rating-p">VIP</text>
              </view>
              <view class="station-rating-text-bg">
                <text class="station-rating-text">优享月卡</text>
              </view>
            </view>
            <text class="vip-1">
              每月预估<text class="vip-2">省34元</text>
            </text>
          </view>
          <text class="vip-3">
            购卡充电更划算
          </text>
        </view>
        <view class="vip-btn">
          <text>99元开通</text>
          <text style="text-decoration: line-through;">29.9元</text>
        </view>
      </view>
      <view class="coupon-container">
        <view class="coupon-card" v-for="(coupon, index) in couponList" :key="index">
          <view class="coupon-top">
            <text class="coupon-num">{{coupon.amount}}元</text>
            <text class="coupon-mul">×</text>
            <text class="coupon-count">{{coupon.count}}张</text>
          </view>
          <view class="coupon-arc"></view>
          <view class="coupon-bottom">{{coupon.name}}</view>
        </view>
      </view>
    </view>
    -->

    <!-- 结束充电卡片 -->
    <view class="end-charging-card">
      <!-- 费用信息区域 -->
      <view class="fee-info-section">
        <view class="fee-item" @click="showChargingFeeDetail">
          <view class="fee-value">{{ realTimeCost }}元</view>
          <view class="fee-label">
            <text>充电费用</text>
            <text class="arrow-icon">></text>
          </view>
        </view>
        <view class="fee-divider"></view>
        <view class="fee-item" @click="showParkingFeeDetail">
          <view class="fee-value">免{{ freeParkTime }}小时</view>
          <view class="fee-label">
            <text>停车费用</text>
            <text class="arrow-icon">></text>
          </view>
        </view>
        <view class="fee-divider"></view>
        <view class="fee-item">
          <view class="fee-value">{{ parkFee }}</view>
          <view class="fee-label">
            <text>超时占用费</text>
          </view>
        </view>
      </view>
      
      <!-- 结束充电按钮 -->
      <view class="end-charging-btn" @click="endCharging">
        <text>结束充电</text>
      </view>
    </view>
  </view>
</template>

<script>
import { chargingOrderDetails, requestStopCharge, queryChargeOrder } from '@/api/charging/index.js'

export default {
  data() {
    return {
      orderNum: '', // 订单号
      batteryLevel: '--', // 电池电量百分比，默认为启动中状态
      chargedAmount: '0', // 已充电量
      chargingTime: '0', // 充电时间（分钟）
      chargingSeconds: 0, // 充电时间（秒）
      estimatedTime: '5', // 预计还需时间（分钟）
      realTimeCost: '0.00', // 实时费用
      power: '-', // 功率
      voltage: '0', // 电压
      current: '0', // 电流
      prepaidAmount: '50.00', // 预充值金额
      monthlySavings: '34', // 每月预估节省
      vipOption1: '30元*不限次', // VIP选项1
      vipOption2: '直降券 2元*5张', // VIP选项2
      couponList: [
        {
          amount: '2',
          count: '5',
          name: '充电直降券'
        },
        {
          amount: '5',
          count: '3',
          name: '满减券'
        },
        {
          amount: '10',
          count: '2',
          name: '折扣券'
        }
      ],
      showOrangeCard: true, // 控制橙色背景卡片的显示
      chargeStatusTimer: null, // 充电状态查询定时器
      chargingSecondsTimer: null, // 充电秒数更新定时器
      chargeStatusData: null, // 充电状态数据
      isChargingStarted: false, // 是否已经开始充电
      chargeState: null, // 当前充电状态
      freeParkTime: '2', // 免费停车时间
      parkFee: '5元/小时', // 超时占用费
      stationName: '场站名称' // 场站名称
    }
  },
  onLoad(options) {
    // 从父级页面获取充电序列号
    if (options.orderNum) {
      this.orderNum = options.orderNum;
      console.log('获取到订单号:', this.orderNum);
      
      // 立即查询一次充电状态
      this.queryChargeStatus();
      
      // 设置定时器，每20秒查询一次充电状态
      this.startInitialPolling();
    } else {
      console.error('未获取到订单号');
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      });
    }
  },
  onUnload() {
    // 页面卸载时清理定时器
    this.stopChargeStatusTimer();
    this.stopChargingSecondsTimer();
  },
  mounted() {
    console.log('couponList:', this.couponList);
    console.log('couponList length:', this.couponList.length);
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    goToHome() {
      // 直接跳转到首页
      uni.reLaunch({
        url: '/pages/index/index'
      });
    },
    activateVip() {
      uni.navigateTo({
        url: '/pages/vip/index'
      });
    },
    endCharging() {
      uni.showModal({
        title: '温馨提示',
        content: '结束充电后，请将充电枪插回充电桩中，谢谢~',
        confirmText: '结束充电',
        cancelText: '再充一会',
        success: (res) => {
          if (res.confirm) {
            this.callStopChargeAPI();
          }
        }
      });
    },
    
    // 调用结束充电接口
    callStopChargeAPI() {
      if (!this.orderNum) {
        uni.showToast({
          title: '订单号不存在',
          icon: 'none'
        });
        return;
      }
      
      const params = {
        orderNum: this.orderNum
      };
      
      console.log('调用结束充电接口，参数:', params);
      
      // 显示加载提示
      uni.showLoading({
        title: '正在结束充电...'
      });
      
      requestStopCharge(params).then(res => {
        console.log('结束充电接口响应:', res);
        uni.hideLoading();
        
        if (res && res.code === 0 && res.success) {
          // 停止充电状态查询定时器
          this.stopChargeStatusTimer();
          
          // 直接跳转到停止充电页面
          uni.navigateTo({
            url: `/pages/stopCharging/index?orderNum=${this.orderNum}`
          });
        } else {
          uni.showToast({
            title: res.msg || '结束充电失败',
            icon: 'none'
          });
        }
      }).catch(error => {
        console.error('结束充电接口调用失败:', error);
        uni.hideLoading();
        uni.showToast({
          title: error.msg || '网络请求失败',
          icon: 'none'
        });
      });
    },
    
    // 跳转到订单详情页
    navigateToOrderDetail() {
      if (!this.orderNum) {
        uni.showToast({
          title: '订单号不存在',
          icon: 'none'
        });
        return;
      }
      
      // 跳转到订单详情页，传递充电序列号
      uni.navigateTo({
        url: `/pages/orderDetail/orderDetail?orderNum=${this.orderNum}`
      });
    },
    
    // 查询充电状态（调用chargingOrderDetails接口）
    queryChargeStatus() {
      if (!this.orderNum) {
        console.error('订单号不存在');
        return;
      }
      
      console.log('查询充电状态，开始调用chargingOrderDetails接口');
      
      chargingOrderDetails({ orderNum: this.orderNum }).then(res => {
        console.log('充电状态查询结果:', res);
        
        if (res && res.code === 0 && res.success && res.data) {
          this.chargeStatusData = res.data;
          this.updateChargingDisplay(res.data);
        } else {
          console.error('充电状态查询失败:', res.msg);
        }
      }).catch(err => {
        console.error('充电状态查询接口调用失败:', err);
      });
    },
    
    // 更新充电显示数据
    updateChargingDisplay(data) {
      // 更新chargeState
      this.chargeState = data.chargeState;
      
      // 检查充电状态，如果chargeState为4则显示充电完成弹窗
      if (data.chargeState === 4) {
        console.log('充电完成，chargeState为4');
        this.showChargingCompleteModal();
        return;
      }
      
      // 检查充电状态，如果chargeState为5则显示错误弹窗
      if (data.chargeState === 5) {
        console.log('充电出现错误，chargeState为5');
        this.showChargingErrorModal();
        return;
      }
      
      // 检查充电状态，如果chargeState为2则开始充电，切换为5秒轮询
      if (data.chargeState === 2 && !this.isChargingStarted) {
        console.log('开始充电，chargeState为2，切换为5秒轮询');
        this.isChargingStarted = true;
        this.startCharging(data);
        this.switchToChargingPolling();
        return;
      }
      
      // 如果chargeState为1，显示启动中状态
      if (data.chargeState === 1) {
        console.log('充电启动中，chargeState为1');
        this.showStartingStatus();
        return;
      }
      
      // 更新电池电量 - 从data.status中获取
      if (data.status && data.status.soc) {
        this.batteryLevel = parseInt(data.status.soc);
      }
      
      // 更新电压 - 从data.status中获取A相电压
      if (data.status && data.status.voltageA) {
        this.voltage = parseFloat(data.status.voltageA).toFixed(1);
      }
      
      // 更新电流 - 从data.status中获取A相电流
      if (data.status && data.status.currentA) {
        this.current = parseFloat(data.status.currentA).toFixed(1);
      }
      
      // 计算功率：P = U × I (A相电压 × A相电流) - 从data.status中获取
      if (data.status && data.status.voltageA && data.status.currentA) {
        const voltage = parseFloat(data.status.voltageA);
        const current = parseFloat(data.status.currentA);
        const power = (voltage * current) / 1000; // 转换为kW
        this.power = power.toFixed(1);
      }
      
      // 更新已充电量 - 从data.status中获取
      if (data.status && data.status.totalPower) {
        this.chargedAmount = parseFloat(data.status.totalPower).toFixed(2);
      }
      
      // 更新实时费用 - 从data中获取orderRealPrice
      if (data.orderRealPrice) {
        this.realTimeCost = parseFloat(data.orderRealPrice).toFixed(2);
      }
      
      // 更新免费停车时间
      if (data.freeParkTime) {
        this.freeParkTime = data.freeParkTime;
      }
      
      // 更新超时占用费
      if (data.parkFee) {
        this.parkFee = data.parkFee;
      }
      
      // 更新场站名称
      if (data.stationName) {
        this.stationName = data.stationName;
      }
      
      // 更新充电秒数 - 从充电开始时间计算
      if (data.startTime) {
        const startTime = new Date(data.startTime).getTime();
        const currentTime = new Date().getTime();
        const chargingDuration = Math.floor((currentTime - startTime) / 1000); // 转换为秒
        this.chargingSeconds = Math.max(0, chargingDuration);
      }
      
      console.log('充电显示数据已更新');
    },
    
    // 启动初始2秒轮询，直到chargeState变成2
    startInitialPolling() {
      this.stopChargeStatusTimer(); // 先清理之前的定时器
      
      this.chargeStatusTimer = setInterval(() => {
        console.log('初始轮询查询充电状态...');
        this.queryChargeStatus();
      }, 2000); // 2秒 = 2000毫秒
      
      console.log('初始轮询定时器已启动，每2秒查询一次');
    },
    
    // 开始充电状态定时器
    startChargeStatusTimer() {
      this.stopChargeStatusTimer(); // 先清理之前的定时器
      
      this.chargeStatusTimer = setInterval(() => {
        console.log('定时查询充电状态...');
        this.queryChargeStatus();
      }, 5000); // 5秒 = 5000毫秒
      
      console.log('充电状态定时器已启动，每5秒查询一次');
    },
    
    // 停止充电状态定时器
    stopChargeStatusTimer() {
      if (this.chargeStatusTimer) {
        clearInterval(this.chargeStatusTimer);
        this.chargeStatusTimer = null;
        console.log('充电状态定时器已停止');
      }
    },
    
    // 显示充电费用详情
    showChargingFeeDetail() {
      uni.showModal({
        title: '充电费用详情',
        content: '当前充电费用为0.14元/度，具体计费规则请查看费用明细。',
        showCancel: false,
        confirmText: '知道了'
      });
    },
    
    // 显示停车费用详情
    showParkingFeeDetail() {
      uni.showModal({
        title: '停车费用详情',
        content: '充电期间停车免费2小时，超出时间按标准收费。',
        showCancel: false,
        confirmText: '知道了'
      });
    },

    // 处理充电失败
    handleChargingFailure() {
      uni.showModal({
        title: '充电失败',
        content: '充电过程中出现异常，请更换充电桩重新尝试。',
        showCancel: false,
        confirmText: '知道了'
      });
      // 跳转到首页
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }, 1500);
    },
    
    // 开始充电，导入接口数据
    startCharging(data) {
      console.log('开始充电，导入接口数据:', data);
      
      // 更新电池电量（如果没有soc字段，保持默认值）
      if (data.status && data.status.soc) {
        this.batteryLevel = parseInt(data.status.soc);
      }
      
      // 更新电压（取A相电压作为主要显示）
      if (data.status && data.status.voltageA) {
        this.voltage = parseFloat(data.status.voltageA).toFixed(1);
      }
      
      // 更新电流（取A相电流作为主要显示）
      if (data.status && data.status.currentA) {
        this.current = parseFloat(data.status.currentA).toFixed(1);
      }
      
      // 计算功率：P = U × I (A相电压 × A相电流)
      if (data.status && data.status.voltageA && data.status.currentA) {
        const voltage = parseFloat(data.status.voltageA);
        const current = parseFloat(data.status.currentA);
        const power = (voltage * current) / 1000; // 转换为kW
        this.power = power.toFixed(1);
      }
      
      // 更新已充电量（如果没有totalPower字段，保持默认值）
      if (data.status && data.status.totalPower) {
        this.chargedAmount = parseFloat(data.status.totalPower).toFixed(2);
      }
      
      // 更新实时费用（使用orderRealPrice）
      if (data.orderRealPrice) {
        this.realTimeCost = parseFloat(data.orderRealPrice).toFixed(2);
      }
      
      // 更新免费停车时间
      if (data.freeParkTime) {
        this.freeParkTime = data.freeParkTime;
      }
      
      // 更新超时占用费
      if (data.parkFee) {
        this.parkFee = data.parkFee;
      }
      
      // 更新场站名称
      if (data.stationName) {
        this.stationName = data.stationName;
      }
      
      // 启动充电秒数更新定时器
      this.startChargingSecondsTimer();
      
      console.log('充电数据已导入到页面');
    },
    
    // 显示启动中状态
    showStartingStatus() {
      console.log('显示启动中状态');
      // 设置默认显示状态
      this.chargedAmount = '0';
      this.estimatedTime = '5';
      this.batteryLevel = '--';
      
      // 可以在这里添加启动中的动画或提示
      console.log('充电启动中，请稍后...');
    },

    // 显示停止中状态
    showStoppingStatus() {
      console.log('显示停止中状态');
      // 设置停止中状态的显示
      this.chargedAmount = '0';
      this.estimatedTime = '0'; // 停止中时预计还需时间为0
      this.batteryLevel = '--';
      this.power = '0.0'; // 停止中时功率为0
      this.voltage = '0';
      this.current = '0';
      this.realTimeCost = '0.00';
      this.isChargingStarted = false; // 重置充电状态
      this.freeParkTime = '2'; // 重置免费停车时间
      this.parkFee = '5元/小时'; // 重置超时占用费
      this.stationName = '场站名称'; // 重置场站名称
      this.chargingSeconds = 0; // 重置充电秒数
      
      // 停止充电秒数更新定时器
      this.stopChargingSecondsTimer();
      
      console.log('充电已停止，请将充电枪插回充电桩中。');
    },

    // 切换到充电状态的5秒轮询
    switchToChargingPolling() {
      this.stopChargeStatusTimer(); // 停止当前的20秒轮询
      this.startChargeStatusTimer(); // 启动5秒轮询
      console.log('切换到充电状态的5秒轮询');
    },
    
    // 启动充电秒数更新定时器
    startChargingSecondsTimer() {
      this.stopChargingSecondsTimer(); // 先清理之前的定时器
      
      this.chargingSecondsTimer = setInterval(() => {
        // 每秒更新充电秒数
        if (this.chargeStatusData && this.chargeStatusData.startTime) {
          const startTime = new Date(this.chargeStatusData.startTime).getTime();
          const currentTime = new Date().getTime();
          const chargingDuration = Math.floor((currentTime - startTime) / 1000);
          this.chargingSeconds = Math.max(0, chargingDuration);
        }
      }, 1000); // 每秒更新一次
      
      console.log('充电秒数更新定时器已启动，每秒更新一次');
    },
    
    // 停止充电秒数更新定时器
    stopChargingSecondsTimer() {
      if (this.chargingSecondsTimer) {
        clearInterval(this.chargingSecondsTimer);
        this.chargingSecondsTimer = null;
        console.log('充电秒数更新定时器已停止');
      }
    },

    // 显示充电完成弹窗
    showChargingCompleteModal() {
      uni.showModal({
        title: '充电完成！',
        content: '您的充电已完成，即将返回首页',
        showCancel: false,
        confirmText: '确定',
        success: (res) => {
          // 跳转回首页
          uni.reLaunch({
            url: '/pages/index/index'
          });
        }
      });
    },

    // 显示充电错误弹窗
    showChargingErrorModal() {
      uni.showModal({
        title: '出现错误',
        content: '请更换充电桩',
        showCancel: false,
        confirmText: '确定',
        success: (res) => {
          // 跳转回首页
          uni.reLaunch({
            url: '/pages/index/index'
          });
        }
      });
    }
  },
  computed: {
    formattedChargingTime() {
      const seconds = this.chargingSeconds;
      if (seconds < 60) {
        return `${seconds}秒`;
      } else if (seconds < 3600) {
        const minutes = Math.floor(seconds / 60);
        return `${minutes}分钟`;
      } else {
        const hours = Math.floor(seconds / 3600);
        const remainingMinutes = Math.floor((seconds % 3600) / 60);
        return `${hours}小时${remainingMinutes}分钟`;
      }
    },
    // 根据电量返回对应的电池图片
    batteryImageSrc() {
      const level = this.batteryLevel;
      
      // 如果电量是字符串（如"--"），返回默认图片
      if (typeof level === 'string') {
        return '@/static/images/b1.png'; // 0%
      }
      
      // 将电量转换为数字
      const batteryLevel = parseInt(level);
      
      // 根据电量范围返回对应的图片
      if (batteryLevel >= 0 && batteryLevel < 25) {
        return '@/pagesOne/static/images/b1.png'; // 0%
      } else if (batteryLevel >= 25 && batteryLevel < 50) {
        return '@/pagesOne/static/images/b2.png'; // 25%
      } else if (batteryLevel >= 50 && batteryLevel < 75) {
        return '@/pagesOne/static/images/b3.png'; // 50%
      } else if (batteryLevel >= 75 && batteryLevel < 100) {
        return '@/pagesOne/static/images/b4.png'; // 75%
      } else if (batteryLevel >= 100) {
        return '@/pagesOne/static/images/b5.png'; // 100%
      } else {
        return '@/pagesOne/static/images/b1.png'; // 默认0%
      }
    }
  }
}
</script>

<style scoped>
.charging-page {
  background: linear-gradient(180deg, #E3F2FD 0%, #ffffff 100%);
  min-height: 100vh;
}

/* 状态栏占位 */
.status-bar {
  height: 7vh;
  width: 100%;
}

/* 自定义导航栏 */
.custom-navbar {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
}

.nav-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.back-icon {
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  margin-left: 20rpx;
}

.nav-station-info {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.station-name {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.arrow-right {
  font-size: 20rpx;
  color: #333;
}

.gun-number {
  font-size: 24rpx;
  color: #666;
}

.nav-right {
  display: flex;
  align-items: center;
}

.plate-container {
  display: flex;
  align-items: center;
  gap: 10rpx;
  background: #ffffff;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  border: 1rpx solid #ffffff;
}

.plate-number {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.edit-icon {
  font-size: 24rpx;
  color: #666;
}

/* 充电状态区域 */
.charging-status-section {
  padding: 40rpx 32rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 调试信息 */
.debug-info {
  width: 100%;
  text-align: center;
  margin-bottom: 20rpx;
  padding: 10rpx 0;
  background-color: #f0f0f0;
  border-radius: 8rpx;
}

.debug-text {
  font-size: 24rpx;
  color: #333;
}

/* 上方信息框 */
.status-info-boxes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 60rpx;
}

.info-box {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  display: inline-flex; /* 改为 inline-flex，让宽度根据内容自适应 */
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  align-self: center; /* 让每个框在容器中居中 */
}

.info-text {
  font-size: 26rpx;
  color: #333;
  font-weight: 400;
}

/* 中央充电进度指示器 */
.charging-progress-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 255px;  /* 固定尺寸，便于与车辆图片对齐 */
  height: 255px; /* 固定尺寸，便于与车辆图片对齐 */
}

.charging-progress-circle-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 255px; /* 固定尺寸，便于与车辆图片对齐 */
  width: 100%; /* 确保容器宽度足够容纳子元素 */
  overflow: visible; /* 允许子元素超出容器边界 */
}

.bg-image {
  width: 255px;
  height: 255px;
  display: block;
}

/* 中心电量圆圈 */
.battery-circle {
  position: absolute;
  top: 38px; /* 原15%≈38px（基于255px容器） */
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, #a2fce7 0%, #80fd8d 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  animation: pulse-wave 2s ease-in-out infinite;
}

.battery-circle-1 {
  position: absolute;
  top: 38px; /* 原15%≈38px（基于255px容器） */
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.limit-charge-view {
  position: absolute;
  top: 140px; /* 在battery-circle-1下方 */
  left: calc(50% + 160px); /* 与che-image-1右边线对齐 */
  transform: translateX(-100%); /* 向左偏移自身宽度，实现右对齐 */
  background: linear-gradient(180deg, #ff6405 0%, #ff9c4b 100%);
  border-radius: 30px; /* 缩小圆角 */
  padding: 6px 12px; /* 缩小内边距 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.limit-charge-text {
  color: #fff;
  font-size: 14px; /* 缩小字体 */
  white-space: nowrap;
}

/* 波动动画关键帧（px） */
@keyframes pulse-wave {
  0% {
    box-shadow:
      0 0 0 4px rgb(132, 255, 153),
      0 0 20px rgba(138, 240, 212, 0.3),
      0 0 0 0 rgba(151, 244, 219, 0.7);
  }
  100% {
    box-shadow:
      0 0 0 4px rgb(132, 255, 153),
      0 0 20px rgba(138, 240, 212, 0.3),
      0 0 0 40px rgba(151, 244, 219, 0);
  }
}

.battery-circle-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.battery-percentage {
  font-size: 24px; /* 固定像素，便于与车辆素材对齐 */
  font-weight: bold;
  text-align: center;
  line-height: 1;
}

.che-image {
  position: absolute;
  bottom: -40px; /* 固定像素，便于与容器对齐 */
  z-index: 2;
}
.che-image-1 {
  position: absolute;
  bottom: -40px; /* 固定像素，便于与容器对齐 */
  width: 320px;
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 精确居中 */
  z-index: 2;
}

.Battery-1 {
  position: absolute;
  bottom: -67px; /* 固定像素，便于与容器对齐 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 精确居中 */
  width:140px;
  z-index: 3;
}

.progress-circle-outer {
  width: 40vw; /* 使用视口宽度单位，占屏幕宽度的60% */
  height: 40vw; /* 保持圆形，高度也设为60vw */
  border: 3rpx dashed #d0d0d0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  position: relative;
}

.progress-circle-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}

.lightning-icon {
  font-size: 40rpx;
  color: #4CAF50;
  margin-bottom: 8rpx;
}

/* 车辆插图 */
.car-illustration {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}

.car-body {
  width: 200rpx;
  height: 120rpx;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;
  position: relative;
  overflow: hidden;
}

.battery-indicator {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 100%);
  border-radius: 20rpx;
  transition: width 0.3s ease;
}

/* 车辆信息条 */
.vehicle-info-bar {
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  margin: 0 auto;
}

.vehicle-left {
  display: flex;
  align-items: center;
  gap: 10rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
  padding: 10rpx 20rpx;
}

.car-icon {
  font-size: 24rpx;
}

.vehicle-plate {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.arrow {
  font-size: 24rpx;
  color: #666;
}

.vehicle-right {
  font-size: 24rpx;
  color: #666;
  background: #f8f8f8;
  border-radius: 12rpx;
  padding: 10rpx 20rpx;
}

/* 充电详情卡片 */
.charging-details-card {
  background: #fff;
  width: 80%;
  padding: 10rpx 30rpx;
  margin: 0 auto 20rpx auto;
  border-radius: 0 0 12rpx 12rpx; /* 移除左上和右上圆角 */
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  position: relative;
}

.charging-details-card.no-top-radius {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.metrics-row {
  display: flex;
  justify-content: space-between; /* 改回 space-between 确保两端对齐 */
  align-items: center;
  margin-bottom: 20rpx;
  width: 100%; /* 确保占满容器宽度 */
}

.metric-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* 居中对齐 */
  flex: 1; /* 等分空间 */
  text-align: center; /* 文本居中 */
  min-width: 0; /* 防止内容溢出 */
}

.metric-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
  white-space: nowrap; /* 防止换行 */
}

.metric-label {
  display: flex;
  align-items: center;
  justify-content: center; /* 居中对齐 */
  gap: 5rpx;
  font-size: 24rpx;
  color: #666;
  white-space: nowrap; /* 防止换行 */
}

.info-icon {
  font-size: 20rpx;
}

.divider-line-vertical {
  width: 1rpx;
  background-color: #e0e0e0; 
  height: 60rpx; /* 设置分隔线高度 */
  align-self: center; /* 垂直居中 */
  flex-shrink: 0; /* 防止分隔线被压缩 */
  margin: 0 10rpx; /* 添加左右间距 */
}

.prepaid-info {
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  font-size: 26rpx;
  color: #666;
  text-align: center;
}

/* VIP会员卡片 */
.station-item {
  width: 85%;
  margin: 20rpx auto 20rpx auto;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.08);
  padding: 30rpx;
  position: relative;
}

.station-info {
  flex: 1;
}

.station-rating {
  display: flex;
  align-items: center;
  background: none;
  padding: 0;
  width: fit-content;
  background: #c0601b;
  border-radius: 8rpx;
}

.station-rating-icon {
  width: 48rpx;
  height: 36rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c0601b;
  border: 1rpx solid #ca7531;
  margin-right: 0;
}

.station-rating-p {
  color: #f8e5a8;
  font-weight: bold;
  font-size: 24rpx;
}

.station-rating-text-bg {
  background: #c0601b;
  border-radius: 0 8rpx 8rpx 0;
  padding: 0 12rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
}

.station-rating-text {
  color: #f8e5a8;
  font-size: 22rpx;
}

.vip-1 {
  color: #c47a48;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  height: 40rpx;
  margin-left: 15rpx;
}

.vip-2 {
  color: #ff6600;
}

.vip-3 {
  color: #c47a48;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  height: 40rpx;
  margin-top: 5rpx;
}

.vip-btn {
  background: linear-gradient(90deg, #fc5734 0%, #fc356b 100%);
  color: #fff;
  font-size: 26rpx;
  padding: 12rpx 36rpx;
  border-radius: 36rpx;
  text-align: center;
  height: 50rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.coupon-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10rpx;
  margin-top: 20rpx;
}

.coupon-card {
  width: 200rpx;
  height: 137rpx;
  background: linear-gradient(90deg, #fe6445 0%, #fc4568 100%);
  border-radius: 24rpx;
  border: 2rpx solid #ffb199;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.08);
  position: relative;
  padding: 5rpx;
  box-sizing: border-box;
}

.coupon-top {
  width: 100%;
  border-radius: 24rpx 24rpx 0 0;
  background: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 70rpx;
  position: relative;
  z-index: 2;
  box-shadow: 0 2rpx 8rpx rgba(255, 153, 0, 0.05);
}

.coupon-num {
  color: #ff5e3a;
  font-size: 34rpx;
  font-weight: bold;
}

.coupon-mul {
  color: #ff5e3a;
  font-size: 24rpx;
  margin: 0 8rpx;
}

.coupon-count {
  color: #ff5e3a;
  font-size: 34rpx;
  font-weight: bold;
}

.coupon-bottom {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 24rpx;
  position: absolute;
  bottom: 18rpx;
  left: 0;
  letter-spacing: 2rpx;
}

.coupon-arc {
  width: 100%;  
  height: 80rpx;
  background: #fff;
  margin: auto 0;
  position: relative;
  clip-path: ellipse(50% 20% at 50% 0%);
  z-index: 1;
  margin-bottom: 10rpx;
}

/* 结束充电卡片 */
.end-charging-card {
  background: #fff;
  border-radius: 16rpx 16rpx 0 0; /* 只有左上和右上是圆角 */
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 费用信息区域 */
.fee-info-section {
  display: flex;
  align-items: center;
  padding: 30rpx;
  gap: 20rpx;
}

.fee-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.fee-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.fee-label {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 24rpx;
  color: #666;
}

.arrow-icon {
  font-size: 20rpx;
  color: #999;
}

.fee-divider {
  width: 1rpx;
  height: 60rpx;
  background-color: #e0e0e0;
  flex-shrink: 0;
}

/* 结束充电按钮 */
.end-charging-btn {
  width: 80%;
  margin: 0 auto 20rpx auto; /* 左右居中 */
  height: 88rpx;
  background: #ff6b35;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 16rpx;
}

/* 橙色背景卡片 */
.orange-header-card {
  background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
  width: 80%;
  margin: 20rpx auto 0 auto;
  border-radius: 18rpx 18rpx 0 0;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.15);
  padding: 11rpx 30rpx;
  position: relative;
  z-index: 1;
}

.orange-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.left-section {
  display: flex;
  align-items: center;
  gap: 10rpx;
  flex-shrink: 0;
}

.station-label {
  font-size: 26rpx;
  color: #8b4513;
  font-weight: bold;
  white-space: nowrap;
}

.checkmark-icon {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkmark-image {
  width: 48rpx;
  height: 48rpx;
}

.slogan-text {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 26rpx;
  color: #8b4513;
  font-weight: 500;
}

.chevron-icon {
  font-size: 20rpx;
  color: #8b4513;
  margin-left: 4rpx;
}

/* 移除 no-top-radius 样式，因为不再需要 */
/*
.charging-details-card.no-top-radius {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
*/
</style> 